/*
 * 发型试戴素材上传
 * @Author: ljb
 * @Date: 2018-05-17 17:07:37
 * @Last Modified by: ljb
 * @Last Modified time: 2018-06-15 15:10:19
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
    .v-admin-hair-create {
        width: 400px;
        min-height: 600px;
        img {
            width: 300px;
            margin-top: 5px;
        }
    }
</style>
<template>
	<Row
		class="v-admin-hair-create"
		type="flex"
		justify="start">
		<i-col push="1">
			<Form
				ref="formValidate"
				:model="formValidate"
				:rules="ruleValidate"
				:label-width="labelWidth()">

				<Form-item
					:label="$t('hair.gender')"
					prop="gender">
					<RadioGroup v-model="formValidate.gender">
						<Radio label="1">
							<span>{{ $t('hair.male') }}</span>
						</Radio>
						<Radio label="2">
							<span>{{ $t('hair.female') }}</span>
						</Radio>
						<Radio label="0">
							<span>{{ $t('hair.other') }}</span>
						</Radio>
					</RadioGroup>
				</Form-item>

				<Form-item
					:label="$t('hair.asset_title')"
					prop="asset_title">
					<i-input
						v-model="formValidate.asset_title"
						:placeholder="$t('hair.please_enter_asset_title')"
						type="text"/>
				</Form-item>

				<Form-item
					:label="$t('hair.sort')"
					prop="sort">
					<InputNumber
						:max="100000"
						:min="0"
						v-model="formValidate.sort"
						:placeholder="$t('hair.please_enter_sort')"/>
				</Form-item>

				<Form-item
					:label="$t('hair.dir')"
					prop="assets_dir">
					<Tooltip
						:content="$t('hair.dir_tip')"
						placement="top">
						<i-input
							v-model="formValidate.assets_dir"
							:placeholder="$t('hair.please_enter_dir')"
							type="text"/>
					</Tooltip>
				</Form-item>

				<Form-item
					:label="$t('hair.thumb')"
					prop="hair_preview">
					<Upload
						:before-upload="file=>fileChange(file,'hair_preview','image_info')"
						:on-remove="file=>fileChange(file,'hair_preview','image_info')"
						:multiple="false"
						accept="image/jpg, image/jpeg, image/png"
						action="//fake_upload_url/">
						<Button
							type="ghost"
							icon="ios-cloud-upload-outline">
							{{ image_info.url ? this.$t('common.change_picture') : this.$t('common.upload_picture') }}
						</Button>
						<img
							v-if="image_info.url"
							:src="image_info.url"
							alt="">
						<div
							v-else
							slot="tip"
							class="license-tip">
							{{ $t('hair.image_format') }}
						</div>
					</Upload>
				</Form-item>

				<Form-item
					:label="$t('hair.assets_png')"
					prop="assets_png">
					<Upload
						:before-upload="file=>fileChange(file,'assets_png','png_info')"
						:on-remove="file=>fileChange(file,'assets_png','png_info')"
						:multiple="false"
						accept="image/png"
						action="//fake_upload_url/">
						<Button
							type="ghost"
							icon="ios-cloud-upload-outline">
							{{ png_info.url ? this.$t('common.change_picture') : this.$t('common.upload_picture') }}
						</Button>
						<img
							v-if="png_info.url"
							:src="png_info.url"
							alt="">
						<div
							v-else
							slot="tip"
							class="license-tip">
							{{ $t('hair.image_format') }}
						</div>
					</Upload>
				</Form-item>

				<Form-item
					:label="$t('hair.assets_bin')"
					prop="assets_bin">
					<Upload
						:before-upload="file=>fileChange(file,'assets_bin','bin_info')"
						:on-remove="file=>fileChange(file,'assets_bin','bin_info')"
						:multiple="false"
						action="//fake_upload_url/">
						<Button
							type="ghost"
							icon="ios-cloud-upload-outline">
							{{ bin_info.name ? this.$t('common.change_picture') : this.$t('common.upload_picture') }}
						</Button>
						<div
							v-if="bin_info.name"
							slot="tip"
							class="license-tip">{{ bin_info.name }}</div>
						<div
							v-else
							slot="tip"
							class="license-tip">
							{{ $t('hair.assets_bin_tip') }}
						</div>
					</Upload>
				</Form-item>

				<Form-item>
					<Button
						type="primary"
						@click="handleSubmit('formValidate')">
						{{ this.$t('common.submit') }}
					</Button>
					<Button
						type="ghost"
						style="margin-left: 8px"
						@click="handleReset('formValidate')">
						{{ this.$t('common.reset') }}
					</Button>
				</Form-item>

			</Form>
		</i-col>
	</Row>
</template>

<script>

import {
	validateImage,
	validateFile,
} from 'src/validate'; // 引入校验文件
import labelWidthMixin from 'src/views/mixins/labelWidthMixin';

export default {

	name: 'HairCreate',
	mixins: [labelWidthMixin],

	data() {
		return {
			formValidate: {
				gender: '',

				asset_title: '',

				assets_dir: '',

				hair_preview: '',

				assets_bin: '',

				assets_png: '',

				sort: 0,
			}, // 新建发型时的表单

			ruleValidate: { // 验证规则
				gender: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('hair.gender') }),
						trigger: 'blur,change',
					},
				],
				asset_title: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('hair.asset_title') }),
						trigger: 'blur,change',
					},
				],
				assets_dir: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('hair.dir') }),
						trigger: 'blur,change',
					},
				],
				hair_preview: [
					{ required: true, validator: validateImage, trigger: 'blur,change' },
				],
				assets_bin: [
					{ required: true, validator: validateFile, trigger: 'blur,change' },
				],
				assets_png: [
					{ required: true, validator: validateImage, trigger: 'blur,change' },
				],
				sort: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('hair.sort') }),
						trigger: 'blur,change',
					},
				],
			},

			// 上传的缩略图信息
			image_info: {
				name: '',
				url: '',
			},

			// 上传的.png信息
			png_info: {
				name: '',
				url: '',
			},

			// 上传的.bin信息
			bin_info: {
				name: '',
				url: '',
			},

		};
	},
	methods: {

		/**
         * 获取上传的图片的链接地址
         * @param  {string} info {需要存储的对象名}
         * @param  {Object} file {文件对象}
         * @return {undefined}
         */
		getUploadImage(info, file) {
			const self = this;

			const reader = new FileReader();

			reader.readAsDataURL(file);

			reader.onload = function (event) {
				self[info].url = event.target.result;
			};
		},

		/**
         * file类型input改变
         * @param  {Object} file {选择的文件对象}
         * @return {Boolean} {false则会停止上传}
         */
		fileChange(file, param, info) {
			this.getUploadImage(info, file);

			this[info].name = file.name;

			this.formValidate[param] = file;

			return false;
		},

		/**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.$emit('post', this.formDataCreate());
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs[name].resetFields();

			this.formValidate.hair_preview = '';
			this.image_info.name = '';
			this.image_info.url = '';

			this.formValidate.assets_png = '';
			this.png_info.name = '';
			this.png_info.url = '';

			this.formValidate.assets_bin = '';
			this.bin_info.name = '';
			this.bin_info.url = '';
		},

		/**
         * 手动拼接表单数据
         * @return {Object} {拼接好的表单数据}
         */
		formDataCreate() {
			const new_object = {
				gender: this.formValidate.gender,

				asset_title: this.formValidate.asset_title,

				assets_dir: this.formValidate.assets_dir,

				hair_preview: this.formValidate.hair_preview,

				assets_bin: this.formValidate.assets_bin,

				assets_png: this.formValidate.assets_png,

				sort: this.formValidate.sort,
			};

			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				form_data.append(key, new_object[key]);
			});

			return form_data;
		},

	},
};
</script>
